<template>
	<view>
		<view class="mar-15 tform">
			<view class="between center tform-item hang-no">
				<view class="value flex">功能名称</view>
				<view>
					<u-input v-model="form.name" input-align="right" placeholder="请输入功能名称" />
				</view>
			</view>
			<view class="between center tform-item hang-no">
				<view class="value flex">功能编码</view>
				<view>
					<u-input v-model="form.code" input-align="right" placeholder="请输入功能编码" />
				</view>
			</view>
			<view class="between center tform-item hang-no">
				<view class="value flex">排序编号</view>
				<view>
					<u-input v-model="form.sort" input-align="right" placeholder="请输入排序编号" />
				</view>
			</view>
			<view class="between center tform-item hang-no">
				<view class="value flex">选择父类</view>
				<view>
					<u-input v-model="form.parentName" placeholder="不填写为则为父类" @focus="openPicker" />
					<!-- <u-select v-model="showSelect" :list="listParent" @confirm="actionSheetCallback"></u-select> -->
					<u-picker :show="showSelect" :columns="listParent" @confirm="actionSheetCallback"
						:closeOnClickOverlay="true" @close="showSelect=false" @cancel="showSelect=false"></u-picker>
				</view>
			</view>
			<view class="between center tform-item hang-no">
				<view class="value flex">显示地址</view>
				<view>
					<u-input v-model="form.addressName" placeholder="" @focus="openPickerAddress" />
					<!-- <u-select v-model="showSelect" :list="listParent" @confirm="actionSheetCallback"></u-select> -->
					<u-picker :show="showSelectAddress" :columns="listAddressName" @confirm="actionSheetCallbackAddress"
						:closeOnClickOverlay="true" @close="showSelectAddress=false"
						@cancel="showSelectAddress=false"></u-picker>
				</view>
			</view>
			<view class="between center tform-item hang-no">
				<view class="value flex">功能路径</view>
				<view>
					<u-input v-model="form.path" input-align="right" placeholder="请输入功能路径" />
				</view>
			</view>
			<view class="between center tform-item mar-5-0 hang-no">
				<view class="value flex">功能图标</view>
				<view class="flex-end center">
					<image class="img mar-0-5" :src="baseURL+nowPathImg"></image>
					<UploadVue path="menu" @onSuccess="onSuccess"></UploadVue>
				</view>
			</view>
			<view class="between center tform-item hang-no">
				<view class="value flex">功能描述</view>
				<view>
					<u-input v-model="form.describe" input-align="right" placeholder="请输入功能描述" />
				</view>
			</view>
			<view class="between center tform-item hang-no">
				<view class="value flex">功能提示</view>
				<view>
					<u-input v-model="form.tips" input-align="right" placeholder="请输入功能提示" />
				</view>
			</view>
			<view class="between center tform-item hang-no">
				<view @click="openStart(true)" class="between flex-1">
					<view class="value flex">开始时间</view>
					<view class="mar-0-5">{{form.startDate}}</view>
				</view>
				<view style="width: 100px;">
					<u-input v-model="form.startDate" input-align="right" placeholder="请输入开始时间" />
				</view>
			</view>
			<view class="between center tform-item hang-no">
				<view @click="openEnd(true)" class="between flex-1">
					<view class="value flex">结束时间</view>
					<view class="mar-0-5">{{form.endDate}}</view>
				</view>
				<view style="width: 100px;">
					<u-input v-model="form.endDate" input-align="right" placeholder="请输入结束时间" />
				</view>
			</view>
		</view>
		<view class="center">
			<u-button class="btn" type="primary" @click="confirmBtn">提交</u-button>
		</view>
		<u-calendar :show="showStart" @confirm="changeStart" closeOnClickOverlay @close="openStart(false)"
			title="开始日期选择"></u-calendar>
		<u-calendar :show="showEnd" @confirm="changeEnd" closeOnClickOverlay @close="openEnd(false)"
			title="结束日期选择"></u-calendar>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		menuSelect,
		menuEdit,
		menuAdd
	} from '../../api/menu'
	import {
		menuAddressSelect
	} from '../../api/menuAddress'
	import UploadVue from '../../components/Upload.vue'
	export default {
		components: {
			UploadVue
		},
		props: {
			menuItem: Object
		},
		data() {
			return {
				value: '',
				type: 'select',
				form: {
					parentId: 0
				},
				action: 'hostApi',
				showSelect: false,
				showSelectAddress: false,
				listParent: [],
				listAddress: [],
				listAddressName: [],
				nowCode: '', //当前编码
				nowPathImg: '',
				showpProgress: false,
				uploadImg: "", //上传后的新图片
				listParentMap: [],
				showStart: false,
				showEnd: false,
			}
		},
		computed: {
			...mapGetters(['baseURL']),
		},
		mounted() {
			this.action = this.baseURL + "/upload/menu"
			this.init();
			this.form = this.menuItem
			this.nowCode = this.form.code;
			this.nowPathImg = this.form.pathImg
		},
		methods: {
			init() {
				menuSelect({
					parentId: 0
				}).then(res => {
					let list = []
					if (res) {

						let map = new Map();
						res.result.forEach(item => {
							map.set(item.id, item);
						})
						map.forEach((v, k) => {
							this.listParentMap.push(v);
							list.push(v.name)
						})
					}
					this.listParent.push(list)
				})
				menuAddressSelect().then(res => {
					let list = []
					this.listAddress = res.result;
					res.result.forEach(item => {
						list.push(item.name)
					})
					this.listAddressName.push(list)
				})
			},
			openPicker() {
				this.showSelect = true
			},
			openPickerAddress() {
				this.showSelectAddress = true
			},
			actionSheetCallback(e) {
				let index = e.indexs[0]
				this.form.parentName = this.listParentMap[index].name;
				this.form.parentId = this.listParentMap[index].id;
				this.showSelect = false;
			},
			actionSheetCallbackAddress(e) {
				let index = e.indexs[0]
				this.form.addressName = this.listAddress[index].name;
				this.form.addressId = this.listAddress[index].id;
				this.showSelectAddress = false;
			},
			onSuccess(data) {
				this.form.pathImg = data

			},
			confirmBtn() {
				console.log(this.form)
				// if (!this.form.name) {
				// 	this.$u.toast('请填写功能名称')
				// 	return;
				// }
				if (!this.form.code) {
					this.$u.toast('请填写功能编码')
					return;
				}
				// if (!this.form.path) {
				// 	this.$u.toast('请填写功能路径')
				// 	return;
				// }
				if (!this.form.pathImg) {
					// 如果父id没有值，则表示一级，可以不用上传图片
					if (this.form.parentId) {
						if (!this.showpProgress) {
							this.$u.toast('等待上传')
							return;
						} else {
							this.$u.toast('请上传功能图片')
							return;
						}
					}
				}

				if (this.form.id) {
					menuEdit(this.form).then(res => {
						uni.$emit('handleClose')
					})
				} else {
					// this.form.addressId=
					menuAdd(this.form).then(res => {
						uni.$emit('handleClose')
					})
				}
			},
			openStart(boo) {
				this.showStart = boo
			},
			openEnd(boo) {
				this.showEnd = boo
			},
			changeStart(e) {
				console.log(e)
				this.form.startDate = e[0]
				this.showStart = false;
			},
			changeEnd(e) {
				console.log(e)
				this.form.endDate = e[0]
				this.showEnd = false
			}
		}
	}
</script>

<style scoped>
	uni-input {
		text-align: right;
	}

	.img {
		width: 80px;
		height: 80px;
	}
</style>